<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="${contextPath}/css/bootstrap.min.css">
<script src="${contextPath}/js/jquery.min.js"></script>
<script src="${contextPath}/js/bootstrap.min.js"></script>
<link type="text/css"
	href="${contextPath}/datetimer/css/jquery-ui-1.8.17.custom.css"
	rel="stylesheet" />
<link type="text/css"
	href="${contextPath}/datetimer/css/jquery-ui-timepicker-addon.css"
	rel="stylesheet" />
<script type="text/javascript"
	src="${contextPath}/datetimer/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript"
	src="${contextPath}/datetimer/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript"
	src="${contextPath}/datetimer/js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript"
	src="${contextPath}/datetimer/js/jquery-ui-timepicker-zh-CN.js"></script>
<script type="text/javascript">
	$(function() {
		$(".ui_timepicker").datetimepicker({
			//showOn : "button",
			//buttonImage : "${contextPath}/datetimer/css/images/icon_calendar.gif",
			//buttonImageOnly: true,
			showSecond : true,
			timeFormat : 'hh:mm:ss',
			stepHour : 1,
			stepMinute : 1,
			stepSecond : 1
		})
	})
</script>
<style type="text/css">
body {
	margin: 5px;
	font-size: 14px;
	padding: 0px;
	background-color: #A2A9B4;
}

.tips {
	color: #f00;
	font-size: 95%;
}

.input {
	width: 50px;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.
divmargintop {
	margin-top: 50px;
	padding-top: 50px;
}

.col-center-block {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

textarea {
	resize: none;
}

.number-search-input {
	padding-right: 20px;
	background: url("${contextPath}/images/search_icon.png") no-repeat
		scroll right center transparent;
}

.time-search-input {
	padding-right: 15px;
	background: url("${contextPath}/images/calendar_icon.png") no-repeat
		scroll right center transparent;
}

.panel-padding-top {
	margin-top: 2px;
	border: 0px;
	background-color: #fff;
	border-radius: 4px;
}

.panel-padding-bottom {
	margin-bottom: 4px;
}

.td-padding-bottom {
	margin-bottom: 0px;
}

.td {
	vertical-align: middle !important;
	text-align: left;
	font-size: 14px;
	font-family: 'Microsoft YaHei';
}

._btn {
	background-color: #5BD2AA;
	border: 0px;
}

._btn:hover {
	background-color: #ADE9D5;
	border: 0px;
}

._btn:focus {
	background-color: #5BD2AA;
	border: 0px;
	outline: none;
}

._btn:active {
	background-color: #5BD2AA;
	background-image: none;
	border: 0px;
	box-shadow: 0px 0px 0px #5BD2AA;
}

.btn-primary:active {
	background-color: #5BD2AA !important;
	border: 0px;
	box-shadow: 0px 0px 0px #5BD2AA;
}

._btn:visited {
	background-color: #5BD2AA;
	border: 0px;
}

.btn_color {
	color: #5BD2AA;
}

.font {
	font-size: 14px;
	font-family: 'Microsoft YaHei';
	font-weight: bold;
}

.font1 {
	font-size: 14px;
	font-family: 'Microsoft YaHei';
	font-weight: normal;
}

.footer {
	text-align: center;
	vertical-align: middle;
}
</style>
</head>

<body onload="javascript:onloadPage(0,0,0)">

	<div class="panel panel-primary panel-padding-top panel-padding-bottom">
		<!-- <div class="panel-heading">
			<h2 class="panel-title">搜索</h2>
		</div> -->
		<div class="panel-body">
			<form class="form-inline">
				<div class="form-group">
					<label class="font">锁编号 &nbsp;</label> <input id="device_no_s"
						type="text" class="form-control number-search-input font1"
						placeholder="请输入名称">&nbsp; <label for="name" class="font">锁状态&nbsp;</label>
					<select id="device_status_s" class="form-control font1">
						<option value="-1">所有</option>
						<option value="1">关</option>
						<option value="2">开</option>
					</select>&nbsp; <label for="name" class="font">充电状态&nbsp;</label> <select
						id="device_charge_s" class="form-control selectpicker font1">
						<option value="-1">所有</option>
						<option value="2">未充电</option>
						<option value="1">充电中</option>
					</select>&nbsp; <label for="name" class="font">剩余电量范围&nbsp;</label><input
						type="text" class="input font1" id="device_battery1_s">~<input
						type="text" class="input font1" id="device_battery2_s">
				</div>
				<br> <br>
				<div class="form-group">
					<label for="name" class="font">故障状态&nbsp;</label> <select
						class="form-control selectpicker font1" id="device_falut_s">
						<option value="-1">所有</option>
						<option value="1">无故障</option>
						<option value="2">有故障</option>
					</select>&nbsp;
					<label for="name" class="font">固件版本&nbsp;</label> <input
						type="text" id="device_firmware_s" class="input font1" style="width: 50px;">&nbsp;
						<label for="name" class="font">硬件版本&nbsp;</label> <input
						type="text" id="device_hdware_s" class="input font1" style="width: 50px;">&nbsp;
					 <label for="name" class="font">刷新时间&nbsp;</label> <input
						type="text" id="device_time1_s" name="datetime"
						class="ui_timepicker form-control time-search-input font1"
						readonly="readonly">&nbsp;~&nbsp; <input type="text"
						id="device_time2_s" name="datetime"
						class="ui_timepicker form-control time-search-input font1"
						readonly="readonly"> &nbsp;
				</div>
				<div class="form-group">
					<input id="btn_query" type="button"
						class="btn btn-primary _btn font1" onclick="javascript:query()"
						value="查找" /> <input id="btn_reset" type="button"
						class="btn btn-primary _btn font1" onclick="javascript:reset()"
						value="重置">
				</div>
			</form>
			<hr>
			<div>
				<button type="button" class="btn btn-primary _btn"
					data-toggle="modal" data-target="#addInfoModal">新增信息</button>
				<!-- <button class="btn btn-primary">批量刷新</button> -->
			</div>
		</div>
	</div>
	<div id="message"></div>
	<div class="panel-padding-top td-padding-bottom">
		<div id="content"></div>
		<nav id="footer" class="footer"></nav>
	</div>


	<!-- ADD -->
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="addInfoModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">新增信息</h4>
				</div>
				<div class="modal-body">
					<form id="addDeviceInfo" class="form-horizontal" role="form"
						method="post" action="${contextPath}/service/device/addDevice.lt">
						<div class="form-group" id="group_device">
							<label for="firstname" class="col-sm-2 control-label"><span
								class="tips">*</span> 锁编号</label>
							<div class="col-sm-10">
								<input type="text" class="form-control has-error" id="device_no"
									name="device_no" value="" placeholder="请输入设备编号">
							</div>
						</div>
						<div class="form-group" id="group_phonenumber">
							<label for="lastname" class="col-sm-2 control-label"><span
								class="tips">*</span> 手机号码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="phone_number"
									name="phone_number" placeholder="请输入号码">
							</div>
						</div>
						<div class="form-group" id="group_simno">
							<label for="lastname" class="col-sm-2 control-label"><span
								class="tips">*</span> SIM号</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="sim_no"
									name="sim_no" placeholder="请输入号码">
							</div>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">备注</label>
							<div class="col-sm-10">
								<textarea class="form-control" rows="5" id="device_desc"
									name="device_desc" placeholder="请输入备注"></textarea>
							</div>
						</div>
					</form>
					<div id="divmessage"></div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal"
						onclick="javascript:clearAddBox()">取消</button>
					<button id="btn_adddeviceinfo" type="button"
						class="btn btn-primary " onclick="javascript:addDeviceInfo()">确定</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!-- ADD -->

	<!-- MODIFY -->
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="saveInfoModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">编辑</h4>
				</div>
				<div class="modal-body">
					<form id="addDeviceInfo" class="form-horizontal" role="form"
						method="post" action="${contextPath}/service/device/addDevice.lt">
						<div class="form-group" id="group_device_u">
							<label for="firstname" class="col-sm-2 control-label"><span
								class="tips">*</span> 锁编号</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="device_no_u"
									name="device_no_u" value="" placeholder="请输入设备编号">
							</div>
						</div>
						<div class="form-group" id="group_phonenumber_u">
							<label for="lastname" class="col-sm-2 control-label"><span
								class="tips">*</span> 手机号码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="phone_number_u"
									name="phone_number_u" placeholder="请输入号码">
							</div>
						</div>
						<div class="form-group" id="group_simno_u">
							<label for="lastname" class="col-sm-2 control-label"><span
								class="tips">*</span> SIM号</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="sim_no_u"
									name="sim_no_u" placeholder="请输入号码">
							</div>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">备注</label>
							<div class="col-sm-10">
								<textarea class="form-control" rows="3" id="device_desc_u"
									name="device_desc_u" placeholder="请输入备注"></textarea>
								<input id="id_u" name="id_u" type="hidden" aria-hidden="true" />
							</div>
						</div>
					</form>
					<div id="divmessage_s"></div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消
					</button>
					<button id="btn_savedeviceInfo" type="button"
						class="btn btn-primary" onclick="javascript:saveDevice()">保存</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!-- MODIFY -->



	<%-- <script src="${contextPath}/scripts/jquery-1.9.1.min.js"></script> --%>
	<script src="${contextPath}/js/tools.js"></script>
	<script type="text/javascript">
		var showLimit = 5;

		function onloadPage(no, size, max) {

			//alert("no" + no);
			if (no <= 0)
				no = 1;
			if (max != 0 && no > max)
				no = max;
			var formdata = {
				page_no : no,
				page_size : size,
				device_no : $("#device_no_s").val(),
				status : $("#device_status_s").val(),
				charge : $("#device_charge_s").val(),
				battery1 : $("#device_battery1_s").val(),
				battery2 : $("#device_battery2_s").val(),
				firmware : $("#device_firmware_s").val(),
				hdware   : $("#device_hdware_s").val(),
				falut : $("#device_falut_s").val(),
				time1 : $("#device_time1_s").val(),
				time2 : $("#device_time2_s").val()
			};

			$.ajax({
				url : "${contextPath}/service/device/listDevicesInfoPaging.lt",
				timeout : 3000,
				dataType : "json",
				type : "get",
				data : formdata,
				success : function(data) {
					showData(data);
				},
				error : function(req, msg, err) {
				}
			});
		}

		function reset() {
			$("#device_no_s").val("");
			$("#device_status_s").val(-1);
			$("#device_charge_s").val(-1);
			$("#device_battery1_s").val("");
			$("#device_battery2_s").val("");
			$("#device_firmware_s").val(""),
			$("#device_hdware_s").val(""),
			$("#device_falut_s").val(-1);
			$("#device_time1_s").val("");
			$("#device_time2_s").val("");
			setTimeout(query, 100);
		}
		
		function query() {
			onloadPage(0, 0, 0);
		}

		function addDeviceInfo() {
			var deviceno = $("#device_no").val();
			var phonenumber = $("#phone_number").val();
			var simno = $("#sim_no").val();

			if (deviceno.length != 16) {
				alertPopu("divmessage", "请输入16位数字或者字母");
				$("#group_device").addClass("has-error");
				return;
			} else {
				$("#group_device").removeClass("has-error");
			}

			if (phonenumber.length != 13) {
				alertPopu("divmessage", "请输入13位数字");
				$("#group_phonenumber").addClass("has-error");
				return;
			} else {
				$("#group_phonenumber").removeClass("has-error");
			}

			if (simno.length != 20) {
				alertPopu("divmessage", "请输入20位字母和数字");
				$("#group_simno").addClass("has-error");
				return;
			} else {
				$("#group_simno").removeClass("has-error");
			}
			alertPopu("divmessage", "");
			$("#btn_adddeviceinfo").attr("data-dismiss", "modal");

			var data = {
				device_no : deviceno,
				phone_number : phonenumber,
				sim_no : simno,
				device_desc : $("#device_desc").val()
			};

			$.ajax({
				url : "${contextPath}/service/device/addDevice.lt",
				timeout : 30000,
				dataType : "json",
				type : "post",
				data : data,
				success : function(data) {
					if (data == 200) {
						setTimeout(query, 100);
						showBox("添加成功!");
					} else {
						showBox("添加失败!");
					}
				},
				error : function(req, msg, err) {
					//alert(msg);
					//alert(err);
				}
			});

			clearAddBox();
		}
		/* 	 
			 $('#addInfoMdeal').on('hidden.bs.modal', function() {
			        $("#addDeviceInfo").data('bootstrapValidator').destroy();
			        $('#addDeviceInfo').data('bootstrapValidator', null);
			        formValidator();
			 }); */

		function clearAddBox() {
			$("#device_no").val("");
			$("#group_device").removeClass("has-error");
			$("#phone_number").val("");
			$("#group_phonenumber").removeClass("has-error");
			$("#sim_no").val("");
			$("#group_simno").removeClass("has-error");
			$("#device_desc").val("");
			$("#group_simno").removeClass("has-error");
			alertPopu("divmessage", "");
		}

		function unlockDevice(id) {

			var formdata = {
				deviceid : id
			};
			//alert($(this).text);
			//$(this).attr("disabled","disabled");
			$.ajax({
				url : "${contextPath}/service/device/unlock.lt",
				timeout : 30000,
				dataType : "json",
				type : "post",
				data : formdata,
				success : function(data) {
					if (data == 200) {
						alert("开锁成功!");
						setTimeout(query, 1000);
					} else {
						alert("开锁失败!");
					}
				},
				error : function(req, msg, err) {
				}
			});
		}

		function refreshDevice(id) {

			var formdata = {
				deviceid : id
			};

			$.ajax({
				url : "${contextPath}/service/device/refresh.lt",
				timeout : 30000,
				dataType : "json",
				type : "post",
				data : formdata,
				success : function(data) {
					setTimeout(query, 1000);
				},
				error : function(req, msg, err) {
				}
			});
		}

		function showDevice(id) {
			location.href = "${contextPath}/service/device/showDeviceDetails.lt?id="
					+ id;
		}

		function editDevice(id) {

			$.ajax({
				url : "${contextPath}/service/device/getDeviceInfoById.lt",
				timeout : 30000,
				dataType : "json",
				type : "get",
				data : {
					id : id
				},
				success : function(data) {
					var entity = eval(data);
					$("#device_no_u").val(entity.device_no);
					$("#phone_number_u").val(entity.phone_number);
					$("#sim_no_u").val(entity.sim_no);
					$("#device_desc_u").val(entity.device_desc);
					$("#id_u").val(entity.id);

				},
				error : function(req, msg, err) {
				}
			});

		}

		function saveDevice() {

			var id = $("#id_u").val();
			var deviceno = $("#device_no_u").val();
			var phonenumber = $("#phone_number_u").val();
			var simno = $("#sim_no_u").val();
			var deviceDesc = $("#device_desc_u").val();

			if (deviceno.length != 16) {
				alertPopu("divmessage_s", "请输入16位数字或者字母");
				$("#group_device_u").addClass("has-error");
				return;
			} else {
				$("#group_device_u").removeClass("has-error");
			}

			if (phonenumber.length != 13) {
				alertPopu("divmessage_s", "请输入13位数字");
				$("#group_phonenumber_u").addClass("has-error");
				return;
			} else {
				$("#group_phonenumber_u").removeClass("has-error");
			}

			if (simno.length != 20) {
				alertPopu("divmessage_s", "请输入20位字母和数字");
				$("#group_simno_u").addClass("has-error");
				return;
			} else {
				$("#group_simno_u").removeClass("has-error");
			}
			alertPopu("divmessage_s", "");
			var data = {
				id : $("#id_u").val(),
				device_no : $("#device_no_u").val(),
				phone_number : $("#phone_number_u").val(),
				sim_no : $("#sim_no_u").val(),
				device_desc : $("#device_desc_u").val()
			};

			$("#btn_savedeviceInfo").attr("data-dismiss", "modal");
			$.ajax({
				url : "${contextPath}/service/device/updateDevice.lt",
				timeout : 30000,
				dataType : "json",
				type : "post",
				data : data,
				success : function(data) {
					alert("修改成功!");
					setTimeout(query, 100);
				},
				error : function(req, msg, err) {
					alert("修改失败");
				}
			});
		}

		function showData(data) {
			var html = "<table class='table table-hover table-condensed td'>"
					+ "<thead>" + "<tr class='font'>" + "<td>ID</td>"
					+ "<td>锁编号</td>" + "<td>锁状态</td>" + "<td>充电状态</td>"
					+ "<td>故障状态</td>" + "<td>剩余电量</td>" + "<td>当前经纬度</td>"
					+ "<td>手机号码</td>" + "<td>最后刷新时间</td>" + "<td>固件版本</td>"
					+ "<td>硬件版本</td>" + "<td>操作</td>" + "</tr>" + "</thead>"
					+ "<tbody>";
			var result = eval(data);
			var response = result.list;
			for (i = 0; i < response.length; i++) {
				var entity = response[i];
				html += "<tr>" + "<td>"
						+ entity.id
						+ "</td>"
						+ "<td>"
						+ entity.device_no
						+ "</td>"
						+ "<td>"
						+ (lockStatusShow(entity.status))
						+ "</td>"
						+ "<td>"
						+ (chargeStatusShow(entity.charge))
						+ "</td>"
						+ "<td>"
						+ modeShow(entity.falut)
						+ "</td>"
						+ "<td>"
						+ batteryShow(entity.battery_status)
						+ "</td>"
						+ "<td>"
						+ undefinedShow(entity.latitude)
						+ ","
						+ undefinedShow(entity.longitude)
						+ "</td>"
						+ "<td>"
						+ undefinedShow(entity.phone_number)
						+ "</td>"
						+ "<td>"
						+ timeStamp2String(entity.update_date)
						+ "</td>"
						+ "<td>"
						+ undefinedShow(entity.sys_version)
						+ "</td>"
						+ "<td>"
						+ undefinedShow(entity.hdware_version)
						+ "</td>"
						+ "<td>"
						+ "<button class='btn-sm btn-link btn_color' onclick=\"javascript:unlockDevice('"
						+ entity.device_no
						+ "')\" >开锁</button><button class='btn-sm btn-link btn_color' onclick=\"javascript:refreshDevice('"
						+ entity.device_no
						+ "')\" >刷新</button>"
						+ "<button class='btn-sm btn-link btn_color' onclick=\"javascript:showDevice('"
						+ entity.id
						+ "')\" >查看详情</button>"
						+ "<button name='edit_device' class='btn-sm btn-link btn_color' data-target='#saveInfoModal' data-toggle='modal' onclick=\"javascript:editDevice('"
						+ entity.id + "')\" >编辑</button>" + "</td>" + "</tr>";
			}

			html += "</tbody>" + "</table>";
			$("#content").html(html);

			var footer_html = "";
			footer_html = "<ul class='pagination font1'>"
					+ "<li><a onclick=\"javascript:onloadPage("
					+ (result.pageNo % showLimit == 0 ? result.pageNo - 5
							: (parseInt(result.pageNo / showLimit)) * 5)
					+ ",0," + result.pagesSize + ")\">&laquo;</a></li>";

			//var index = ((parseInt(result.pageNo/showLimit)*5) == 0)?1:parseInt(result.pageNo/showLimit)*5;
			var index = (result.pageNo % 5 == 0) ? result.pageNo - 4
					: parseInt(result.pageNo / showLimit) * 5 + 1;
			var len = index + showLimit - 1 >= result.pagesSize ? result.pagesSize
					: index + showLimit - 1;
			//alert("index : " + index);
			for (; index <= len; index++) {
				footer_html += "<li><a onclick=javascript:onloadPage(" + index
						+ ",0," + result.pagesSize + ") >" + index
						+ "</a></li>";
			}

			footer_html += "<li><a onclick=\"javascript:onloadPage("
					+ (result.pageNo % showLimit == 0 ? result.pageNo + 1
							: (parseInt(result.pageNo / showLimit) + 1) * 5 + 1)
					+ ",0," + result.pagesSize + ")\">&raquo;</a></li>"
					+ "<li>&nbsp;&nbsp; 第" + result.pageNo + "页&nbsp; 共"
					+ result.pagesSize + "页 </li></ul>";
			$("#footer").html(footer_html);
		}
	</script>
</body>
</html>
